<template>
    <div class="exchange-detail-container">
        <!-- 顶部导航栏 -->
        <van-sticky>
            <div class="head">
                <img class="head-back-img" @click="goBack" src="../assets/back.svg" alt="">
                <div class="title">兑换详情</div>
            </div>
        </van-sticky>

        <!-- 主要内容区域 -->
        <div class="content">
            <!-- 状态卡片 -->
            <div class="status-card" :class="statusClass">
                <div class="status-icon">
                    <van-icon :name="statusIcon" size="24px" />
                </div>
                <div class="status-text">{{ form.status || '加载中...' }}</div>
                <div class="status-desc" v-if="form.status === '充值中'">正在充值中,请耐心等待</div>
            </div>

            <!-- 商品信息 -->
            <van-cell-group class="info-card">
                <van-cell title="商品名称" :value="form.productName || '无'" />
                <!-- <van-cell title="商品编号" :value="form.productNo || '无'" /> -->
                <van-cell title="充值号码" :value="form.rechargeNumber || '无'" v-if="form.rechargeNumber" />
            </van-cell-group>

            <!-- 订单信息 -->
            <van-cell-group class="info-card">
                <!-- <van-cell title="订单编号" :value="form.orderNo || '无'" /> -->
                <van-cell title="订单编号" :value="form.outTradeNo || '无'" />
                <van-cell title="创建时间" :value="formatTime(form.startTime)" />
            </van-cell-group>

            <!-- 支付信息 -->
            <van-cell-group class="info-card">
                <van-cell title="商品原价" :value="`¥${form.officialPrice || '0.00'}`" />
                <van-cell title="实际支付" :value="`¥${form.wxOrderAmount || '0.00'}`" value-class="highlight" />
                <!-- <van-cell title="支付方式" value="微信支付" v-if="form.wxOrderId" /> -->
            </van-cell-group>
        </div>
    </div>
</template>

<script>
import { Sticky, Cell, CellGroup, Icon, Button, Toast } from 'vant';
import plantAPI from "@/api/plant";
export default {
    components: {
        [Sticky.name]: Sticky,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon,
        [Button.name]: Button
    },
    data() {
        return {
            order_no: '',
            tradeType: '',
            form: {
                // 默认数据，实际会被API返回数据覆盖
                consumeAmount: 0,
                officialPrice: 25,
                orderNo: '',
                outTradeNo: '',
                productName: null,
                productNo: '',
                rechargeNumber: '',
                startTime: '',
                status: '',
                wxOrderAmount: 0,
                wxOrderId: null
            }
        }
    },
    computed: {
        statusClass() {
            switch (this.form.status) {
                case '充值中':
                    return 'status-processing';
                case '成功':
                    return 'status-success';
                case '失败':
                    return 'status-failed';
                default:
                    return 'status-default';
            }
        },
        statusIcon() {
            switch (this.form.status) {
                case '充值中':
                    return 'clock';
                case '成功':
                    return 'checked';
                case '失败':
                    return 'close';
                default:
                    return 'question';
            }
        }
    },
    created() {
        this.order_no = this.$route.query.orderNo;
        this.fetchOrderDetail();
    },
    methods: {
        fetchOrderDetail() {
            Toast.loading({
                message: '加载中...',
                forbidClick: true
            });

            plantAPI.centerOrderdetail(this.order_no).then(res => {
                this.form = res.data;
                Toast.clear();
            }).catch(() => {
                Toast.fail('加载失败');
            });
        },
        formatTime(time) {
            if (!time) return '-';
            return time.replace('T', ' ').substr(0, 19);
        },
        goBack() {
            this.$router.go(-1);
        },
        refreshOrder() {
            Toast.loading({
                message: '刷新中...',
                forbidClick: true,
                duration: 1000
            });

            this.fetchOrderDetail();
        },
        contactService() {
            Toast('正在跳转客服...');
            // 实际项目中这里应该跳转到客服页面或拨打电话
        }
    }
};
</script>

<style lang="scss" scoped>
.exchange-detail-container {
    background-color: #f7f8fa;
    min-height: 100vh;

    .head {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        position: relative;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .head-back-img {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 15px;
            z-index: 1;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
    }

    .content {
        padding: 0 15px 15px;

        .status-card {
            margin: 15px 0;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

            .status-icon {
                margin-bottom: 10px;
            }

            .status-text {
                font-size: 18px;
                font-weight: 500;
                margin-bottom: 5px;
            }

            .status-desc {
                font-size: 13px;
                opacity: 0.9;
            }
        }

        .status-processing {
            background: linear-gradient(135deg, #ff9a44, #ff6b6b);
        }

        .status-success {
            background: linear-gradient(135deg, #5ad8a6, #36c1a0);
        }

        .status-failed {
            background: linear-gradient(135deg, #ff6b6b, #ff4757);
        }

        .status-default {
            background: linear-gradient(135deg, #a0a0a0, #808080);
        }

        .info-card {
            margin: 20px 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .highlight {
            color: #ff6b6b;
            font-weight: 500;
        }
    }
}

::v-deep .van-cell {
    display: flex;
    align-items: center;
}

::v-deep .van-cell__title {
    flex: none;
    width: 30%;
    /* 标题宽度 */
    min-width: 80px;
    /* 最小宽度 */
}

::v-deep .van-cell__value {
    flex: 1;
    white-space: normal;
    word-break: break-all;
    text-align: right;
    padding-left: 10px;
}
</style>